<template>
  <div class="card-border">
    <div class="supplier-dtl-title">报关信息</div>
    <el-table :data="listData" :row-class-name="rowClassName">
      <el-table-column prop="cn_name" label="中文报关名称" width="110"></el-table-column>
      <el-table-column prop="en_name" label="英文报关名称" width="110"></el-table-column>
      <el-table-column
        prop="cn_material"
        label="中文报关材质"
        width="110"
      ></el-table-column>
      <el-table-column
        prop="en_material"
        label="英文报关材质"
        width="110"
      ></el-table-column>
      <el-table-column prop="customs_code" label="海关编码" width="100"></el-table-column>
      <el-table-column prop="declare_unit" label="报关单位" width="100"></el-table-column>
      <el-table-column
        prop="customs_quantity"
        label="规格数量"
        width="100"
      ></el-table-column>
      <el-table-column prop="purpose" label="产品用途" width="110"></el-table-column>
      <el-table-column prop="customs_link" label="报关链接" width="150">
        <template #default="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            :content="row.goods_sku_customs_info[0]?.customs_link"
            placement="top"
          >
            <VText
              type="button"
              :line="2"
              :value="row.goods_sku_customs_info[0]?.customs_link"
              :copy="true"
              @click="openLink(row.goods_sku_customs_info[0].customs_link)"
            ></VText>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="customs_price" label="报关链接价格" width="110">
        <template #default="{ row }">
          <el-tooltip
            class="item"
            effect="dark"
            :content="row.goods_sku_customs_info[0]?.customs_price"
            placement="top"
          >
            <VText
              type="button"
              :line="2"
              :value="row.goods_sku_customs_info[0]?.customs_price"
              :copy="true"
              @click="openLink(row.goods_sku_customs_info[0].customs_price)"
            ></VText>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="tax_rebate_rate"
        label="退税率"
        width="100"
      ></el-table-column>
      <el-table-column prop="declare_elements" label="申报要素" width="200">
        <template #default="{ row }">
          <vText :value="row.declare_elements" :line="3"></vText>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" v-if="!disabled" width="80">
        <template #default="{ row, $index }">
          <el-button type="primary" link @click="handleEdit(row, $index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <dialog-form
      ref="dialogFormRef"
      :supplier="supplierList"
      @updateForm="updateForm"
      :info="info"
    ></dialog-form> -->
  </div>
</template>

<script setup lang="jsx" name="customs">
// import dialogForm from "./dialogForm.vue";
import { openLink } from "@/utils/index.js";
let handleType = reactive(inject("handleType"));

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  supplier: {
    type: Array,
    default: () => {
      return [];
    },
  },
  index: {
    type: Number,
    default: 0,
  },
  info: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { info } = toRefs(props);

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    !(window.BTN_AUTH || []).includes("/goods/task/product/general-info")
  );
});

const { supplier } = toRefs(props);

const listData = computed({
  get: () => {
    let list = [];
    supplier.value.map((i, index) => {
      if (index == props.index && !i.delete && !isEmpty(i.goods_sku_customs)) {
        list.push({
          ...i.goods_sku_customs,
          supplier_name: i.supplier_name,
          supplier_code: i.supplier_code,
          is_default_supplier: i.is_default_supplier,
          currentIndex: index,
        });
      }
    });
    return list;
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const supplierList = computed(() => {
  let list = [];
  supplier.value.map((i, index) => {
    if (!i.delete && isEmpty(i.goods_sku_customs)) {
      list.push(i);
    }
  });
  return list;
});

const isEmpty = (obj) => {
  if (!obj) {
    return true;
  }
  let flag = true;
  Object.keys(obj).forEach(function (key) {
    if (obj[key] !== null && obj[key] !== undefined) {
      flag = false;
    }
  });
  return flag;
};

const sku = computed({
  get: () => props.sku,
});

const dialogFormRef = ref();
const currentIndex = ref("");

const emit = defineEmits(["editRow"]);

// 编辑
const handleEdit = (row, rowIndex) => {
  nextTick(() => {
    // currentIndex.value = rowIndex;
    // dialogFormRef.value.open("edit", row);
    emit("editRow");
  });
};

// // 新增、编辑回调
// const updateForm = (row) => {
//   supplier.value[currentIndex.value].goods_sku_customs = {
//     ...supplier.value[currentIndex.value].goods_sku_customs,
//     ...row,
//   };
// };

const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};
</script>

<style lang="scss" scoped></style>
